<!--
 * @FileDescription 温度计
 * @Author 杨宇翔
 * @Date 20220706 15:01:16
 * @LastEditors 杨宇翔
 * @LastEditTime 20220706 15:01:16
-->
<template>
    <div class="temperature">
        <div ref="container" class="chart">
        </div>
        <div class="information">
            <span>当前温度</span>
            <span>{{ Number.parseFloat((temperature - 40).toFixed(2)) }}°C</span>
        </div>
    </div>
</template>

<script setup lang="ts">
import { EChartOption, EChartsType, init } from 'echarts';
import { computed, onMounted, onUnmounted, ref, Ref, watch } from 'vue';
import { ProtocolComponent } from './InertialNavigationComponent';

const temperature = computed(() => ProtocolComponent.Default.Frame.Temperature + 40)

watch(temperature, value => chart.value!.setOption({
    series: [
        {
            data: [value],
        }
    ]
}));

const container: Ref<HTMLDivElement | null> = ref(null);
const chart: Ref<EChartsType | null> = ref(null);

onMounted(async () => {
    chart.value = init(container.value!, 'dark');
    const option = {
        backgroundColor: 'transparent',
        xAxis: {
            type: 'category',
            data: ['当前温度'],
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
        },
        yAxis: [
            {
                type: 'value',
                position: 'right',
                min: -40,
                max: 80,
                interval: 2,
                offset: -50,
                axisLabel: {
                    show: false
                },
                axisTick: {
                    show: true
                },
                splitLine: {
                    show: false
                }
            },
            {
                type: 'value',
                position: 'right',
                min: -40,
                max: 80,
                interval: 10,
                offset: -50,
                axisLabel: {
                    show: true,
                    margin: 32,
                },
                axisTick: {
                    show: true,
                    length: 15
                },
                splitLine: {
                    show: false
                }
            },
            {
                type: 'value',
                position: 'right',
                min: 0,
                max: 120,
                axisLabel: {
                    show: false,
                },
                splitLine: {
                    show: false
                },
            },
        ],
        series: [
            {
                type: 'bar',
                yAxisIndex: 2,
                data: [temperature.value],
                barWidth: 5,
                barCategoryGap: "0%",
                color: '#C82A2A',
                showBackground: true,
                backgroundStyle: {
                    color: "rgba(97, 50, 50, 1)"
                }
            }
        ]
    };
    chart.value.setOption(option as EChartOption);
});

onUnmounted(() => {
    chart.value?.dispose();
});
</script>

<style scoped>
.temperature {
    position: absolute;
    left: 4rem;
    bottom: 4rem;

    width: 16rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.chart {
    width: 100%;
    height: 72rem;

    position: relative;
    left: -4rem;
    bottom: -6rem;
}

.information {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.information>span {
    padding-right: 1rem;

    color: #B1B1D4;
    font-size: 1.8rem;

    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

    line-height: 2.7rem;
}

.information>span:last-of-type {
    color: #7B64FD;
    font-size: 2.4rem;

    line-height: 2.9rem;
}
</style>